<script setup>
import AddIcon from "../components/AddIcon.vue";
import Icon from "../components/Icon.vue";
import { Modal } from "@arco-design/web-vue";
import { useRoute, useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import { useStore } from "../store";
import { generateBand } from '../service/server'

const router = useRouter();
const route = useRoute();
const store = useStore();
const isAddIconModalShow = ref(false);
const isLoading = ref(false);

//页面组件初次挂载获取IconGroup具体信息
onMounted(() => {
  store.getIcons(route.query.name);
});

//返回首页
const backToHomeHandle = () => {
  router.back();
};
//导出js文件
const exportJsClickHandle = () => {
  console.log("导出js文件了！");
  generateBand(route.query.name)
};
//点击上传Icon，显示上传Icon的Modal
const addIconClickHandle = () => {
  isAddIconModalShow.value = true;
};

//上传前文件类型确认，类型正确后直接在云端创建Icon，同名覆盖
const beforeUpload = async (file) => {
  if (file.type !== "image/svg+xml") {
    Modal.confirm({
      title: "文件类型错误！",
      content: "仅允许上传svg格式文件，请检查文件类型！",
      hideCancel: true,
    });
    return;
  } else {
    await store.createIcon(route.query.name, file.name.split(".")[0], file);
    return true;
  }
};

//关闭上传Icon的Modal
const handleCancel = () => {
  isAddIconModalShow.value = false;
};
</script>

<template>
  <!-- band的头部信息，包括IconGroup的题目和返回首页的按钮 -->
  <div class="myBandHeader">
    <h1 class="bandTitle">{{ route.query.name }}</h1>
    <span class="backToHomeBtn" @click="backToHomeHandle"><icon-home />返回首页</span>
  </div>
  <!-- 加载中 -->
  <div class="homeLoadingBox" v-if="isLoading">
    <a-spin dot class="homeLoading" />
  </div>
  <!-- 遍历store里icons的内容，依次渲染各Icon，最后有一个添加Icon按钮 -->
  <div class="myBand">
    <Icon v-for="icon in store.icons" iconSize="big" :icon="icon" v-if="store.icons.length" />
    <div v-else="!store.icons.length">
      <h3 class="noneIconText">暂无Icon</h3>
    </div>
    <AddIcon iconSize="big" @click="addIconClickHandle" />
  </div>
  <!-- 导出js文件 -->
  <a-button type="primary" class="exportJsBtn" large :disabled="!store.icons.length"
    @click="exportJsClickHandle"><icon-share-internal />导出js文件</a-button>
  <!-- 上传Icon的Modal，点击上传Icon按钮后显示 -->
  <a-modal v-model:visible="isAddIconModalShow" @ok="handleCancel" unmountOnClose hide-cancel ok-text="完成">
    <template #title> 上传新的Icon </template>
    <p> 仅支持svg格式文件，文件名默认作为icon的name属性，上传前请检查！ </p>
    <a-upload :auto-upload="false" draggable action="/" list-type="picture" :limit="12" @before-upload="beforeUpload"
      :show-remove-button="false" :show-retry-button="false" :show-cancel-button="false">
    </a-upload>
  </a-modal>
</template>

<style scoped>
.homeLoadingBox {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 300px;
}

.myBandHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: orange;
}

.bandTitle {
  margin: 0px 20px 60px;
}

.backToHomeBtn:hover {
  color: #fff;
  cursor: pointer;
  transform: scale(1.1);
  transition: transform 0.1s linear;
}

.myBand {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  row-gap: 60px;
  margin: 20px;
}

.exportJsBtn {
  color: black;
  font-weight: bold;
  float: right;
}

.noneIconText {
  color: #fff;
  line-height: 80px;
  text-align: center;
}
</style>
